<template>
  <div>
    <div class="header">
      <div class="name">
        圈舍名称:<input placeholder="请输入" class="input">
      </div>
      <div class="state">
        状态
        <select>
          <option>全部</option>
          <option>局部</option>
        </select>
      </div>

      <div class="query">
        <el-row>
          <el-button>查询</el-button>
        </el-row>
      </div>
      <div class="reset">
        <el-row>
          <el-button>重置</el-button>
        </el-row>
      </div>
      <div class="addranch">
        <el-row>
          <el-button type="primary" @click="dialogFormVisible = true">添加圈舍</el-button>
        </el-row>
      </div>
    </div>
    <hr/>
    <div class="componet">


      <div class="ranchbox"
           v-for="(item,index) in list1" :key="index"
           :cid="item.cid"
           :cname="item.cname"
           :ccount="item.ccount"
           :ctag="item.ctag"
           :cwarm="item.cwarm"
           :fid="item.fid"
           :state="item.state">

        <div class="boder2">
          <div class="image">

          </div>
          <div class="company">
            圈舍名称:{{item.cname}}
          </div>

          <div class="msg">
            <div class="msgleft">
              <div class="msgleft1">
                存栏量:{{item.ccount}}
              </div>
              <div class="msgleft2">

                耳标盘点数量:{{item.ctag}}
              </div>
              <div class="msgright">
                <div class="msgright1">
                  告警数:{{item.cwarm}}
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="footer">
          <el-row class="btn">
            <el-button type="primary" plain size="small">查看</el-button>
            <el-button type="warning" plain size="small" @click="update(item.cid)">编辑</el-button>
            <el-button type="danger" plain size="small" @click="del(item.cid)">删除</el-button>
            <el-button type="info" plain size="small" @click="stop(item.cid)">停用</el-button>
          </el-row>
        </div>

      </div>

    </div>


    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="colonyData.currentPage"
        :page-sizes="[3,6,9,12]"
        :page-size="colonyData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>




    <el-dialog title="添加圈舍" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="圈舍名称" :label-width="formLabelWidth">
          <el-input v-model="form.cname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="存栏量" :label-width="formLabelWidth">
          <el-input v-model="form.ccount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="耳标盘点数量" :label-width="formLabelWidth">
          <el-input v-model="form.ctag" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="告警数" :label-width="formLabelWidth">
          <el-input v-model="form.cwarm" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addcolony">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改数据" :visible.sync="dialogFormVisible2">
      <el-form :model="form2">
        <el-form-item label="圈舍名称" :label-width="formLabelWidth2">
          <el-input v-model="form2.cname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="存栏量" :label-width="formLabelWidth2">
          <el-input v-model="form2.ccount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="耳标盘点数量" :label-width="formLabelWidth2">
          <el-input v-model="form2.ctag" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="告警数" :label-width="formLabelWidth2">
          <el-input v-model="form2.cwarm" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="edit(form2.cid)">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

import axios from "axios";

export default {
  data(){
    return{
      colonyData:{
        currentPage:1,
        pageSize:3

      },

      list1:[],
      total:0,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form:{
        cid:'',
        cname: '',
        ccount:'',
        ctag:'',
        cwarm:'',
        fid:''
      },
      form2:{
        cid:'',
       cname: '',
        ccount:'',
        ctag:'',
        cwarm:'',
        fid:''
      },
      formLabelWidth: '100px',
      formLabelWidth2: '100px',


    }
  },
  created() {
    axios.post('/day19_04_ssm_crud_war/colony/colonylist',this.colonyData).then(res=>{
      console.log(res)
      this.list1=res.data.data;
      //你保存总的数据条数
      this.total=res.data.total;
      console.log('list1',this.list1);
    })

  },




  methods: {
    async addcolony() {
      let res = await axios.post('/day19_04_ssm_crud_war/colony/add', this.form);
      console.log(this.form)
      console.log(res.data.code)
      if (res.data.code == 1) {
        this.$message({
          message: '新增牧场成功',
          type: "success"
        })
        this.dialogFormVisible = false,
            this.reload()

      } else {
        this.$message({
          message: '新增牧场失败',
          type: 'error'
        })
      }

    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.colonyData.pageSize=val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      //修改当前页码 为当前用户点击的
      this.colonyData.currentPage = val;

      //进入页面的瞬间获取是第一页数据
      this.reload();
    },


    update(item) {
      this.dialogFormVisible2 = true;
      console.log(item);
      this.form2.cid=item;
      this.form2.cname = item.cname;
      this.form2.ccount = item.ccount;
      this.form2.ctag = item.ctag;
      this.form2.cwarm = item.cwarm;

    },
    async edit(cid){
      console.log(cid)
      let res = await axios.post("/day19_04_ssm_crud_war/colony/edit", this.form2);
      console.log(res.data.code);
      // 提示用户操作结果
      if (res.data.code == 1) {
        this.$message({
          message: '修改信息成功',
          type: 'success',
        })
      } else {
        this.$message({
          message: '修改信息失败',
          type: 'error',
        })
      }
// 关闭弹窗
      this.dialogFormVisible2 = false;
      this.reload();
// 重新渲染当前页的数据
    },


    async del(cid){
      let res= await axios.post('/day19_04_ssm_crud_war/colony/del',{cid})
      console.log(res)
      if (res.data.code==1){
        this.$message({
          message:'删除成功',
          type:"success"
        })
        this.reload()
      }else {
        this.$message({
          message:'删除失败',
          type:'error'
        })
      }

    },
    reload(){
      axios.post('/day19_04_ssm_crud_war/colony/colonylist',this.colonyData).then(res=>{
        console.log(res)
        this.list1=res.data.data;
        //你保存总的数据条数
        this.total=res.data.total;
        console.log('list1',this.list1);
      })

    },
    async stop(cid){
      let  res = await axios.post('/day19_04_ssm_crud_war/colony/stop',{cid})
      console.log(res)
      if (res.data.code == 1){
        this.$message({
          message:'禁用成功',
          type:"success"
        })
        this.reload()
      }else {
        this.$message({
          message:'禁用失败',
          type:'error'
        })
      }

    },
  }


}
</script>

<style lang="less" scoped>
.header{
  width: 100%;
  height: 50px;
  display: flex;
  margin-top: 20px;

}
.name{
  width: 200px;
  height: 5px;
  position: relative;
  margin-left: 10px;
  margin-top: 10px;

}
.state{
  margin-left:200px;
  line-height: 25px;
}
.query{
  margin-left: 100px;
}
.reset{
  margin-left: 30px;
}
.addranch{
  margin-left: 30px;
}
.input{
  position: absolute;
  left: 70px;
}
.ranchbox{
  width: 300px;
  height: 400px;
  border: 1px solid #271c19;
  margin-top: 10px;
  margin-left: 30px;


}
.image{
  width: 300px;
  height: 200px;
  background: url("@/assets/img/7.png");
  background-position: -100px,0;


}
.componet{
  width: 1000px;
  display: flex;
  overflow: hidden;
}
.company{
  text-align: center;
  font-family:  "微软雅黑", Arial, sans-serif;
  margin-top: 10px;
}
.msg{
  display: flex;
  margin-top: 12px;
}
.msgleft{
  //margin-top: 10px;
  margin-left: 10px;
  padding: 5px;
  margin-bottom: 30px;
  display: flex;
  font-size: 16px;
}

.msgleft1{

  font-size: 16px;

}
.msgleft2{
  font-size: 16px;
  margin-left:10px;

}
.msgright1{
  font-size: 16px;

  margin-left: 10px;
}
.boder2{
  //border: 1px solid #271c19;
}
.footer{
  width: 300px;
  height: 76px;
  border: 1px solid darkgray;
}
.btn{
  margin-left: 20px;
  line-height: 80px;
}
</style>